<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
  import { getExpressDetail } from '@/apis/timeline'
  import type { ExpressData } from '@/types/timeline'
  import { onLoad } from '@dcloudio/uni-app'
  import { onMounted, ref } from 'vue'
  import AMapLoader from '@amap/amap-jsapi-loader'

  let map: any = null

  // 订单派送状态1已发货 2已揽件 3 运输中 4 派送中 5已签收

  function onBackClick() {
    uni.navigateBack({ delta: 1 })
  }

  const props = defineProps<{
    id: string
    express: string
  }>()

  const expressDetail = ref<ExpressData>()

  const getData = async () => {
    // console.log(props.express)

    const res = await getExpressDetail(props.id)
    expressDetail.value = res
    // console.log(expressDetail.value)
  }

  onMounted(async () => {
    await getData()

    window._AMapSecurityConfig = {
      securityJsCode: '44c06d35ea627192fbf865082e44dabc',
    }
    const AMap = await AMapLoader.load({
      key: '4713fac60be7820500fda1227006457b', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })

    map = new AMap.Map('map', {
      // 设置地图容器id
      viewMode: '3D', // 是否为3D地图模式
      zoom: 12, // 初始化地图级别
      center: [
        expressDetail.value?.currentLocationInfo.longitude,
        expressDetail.value?.currentLocationInfo.latitude,
      ], // 初始化地图中心点位置
      mapStyle: 'amap://styles/macaron',
    })

    AMap.plugin('AMap.Driving', () => {
      const driving = new AMap.Driving({
        map: map, // 指定轨迹显示地图实例
        showTraffic: false, // 关闭交通状态
      })
      console.log(expressDetail.value?.logisticsInfo)
      // 开始位置坐标
      const start = expressDetail.value?.logisticsInfo.shift()
      // 结束位置坐标
      const end = expressDetail.value?.logisticsInfo.pop()
      // 途经点
      const waypoints = expressDetail.value?.logisticsInfo.map((item) => {
        return [item.longitude, item.latitude]
      })

      driving.search(
        [start?.longitude, start?.latitude],
        [end?.longitude, end?.latitude],
        { waypoints: waypoints },
        (status: string, result: object) => {
          // 未出错时，result即是对应的路线规划方案
          console.log(status, result)
        }
      )
    })
  })
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <view id="map" class="uni-map"></view>
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">订单{{ expressDetail?.statusValue }}</cover-view>
      <cover-view class="extra">
        预计{{ expressDetail?.estimatedTime }} 送达 {{ expressDetail?.name }}
        {{ expressDetail?.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content"> 收货地址：{{ props.express }} </view>
        </view>
        <view class="line" v-for="item in expressDetail?.list" :key="item.id">
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-if="item.status === 4">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-truck" />
          </view>
          <view class="badge icon" v-if="item.status === 5">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content"> {{ item.content }} </view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './timeline.scss';
</style>
